<template>
  <div class="box">
      <div class="content">
        <Row style="padding: 20px" type='flex' justify='end'>
          <Col>
            <Button type="primary" @click="add" style="width:80px">添加</Button>
          </Col>
        </Row>
        <div class="content_list">
          <Table stripe border :columns="columns7" :data="data6" id="mygrid"></Table>
        </div>
        <div>
          <div class="content_page">
            <Page :total="50"  @on-change="pageNum" class-name="page" show-elevator/>
          </div>
        </div>
      </div>
      <div class="alert" v-if="showalert">
        <p class="p_title">添加兑换券</p>
        <Row class="popupcontent">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <FormItem label="兑奖券名称:" prop="mingcheng" style="margin-left:115px;padding-top:40px">
                <Input v-model="formValidate.mingcheng" placeholder="请输入" @on-change="mingcheng" class="Row_content_input"></Input>
            </FormItem>
            <FormItem label="消费金额(元):" prop="money" style="margin-left:115px;">
                <Input v-model="formValidate.money" placeholder="请输入" @on-change="money" class="Row_content_input"></Input>
            </FormItem>
            <p class="goubinum">
              <span style="margin-right:15px">购币数量:</span>
              <span>0.00</span>
            </p>
            <FormItem label="赠币数量:" prop="num" style="margin-left:115px;">
                <Input v-model="formValidate.num" placeholder="请输入" @on-change="num" class="Row_content_input"></Input>
            </FormItem>
            <FormItem style="border-top: 1px solid #E9E9E9;padding-top:15px;padding-bottom:15px">
                <Button type="default" @click="handleReset('formValidate')" style="margin-right: 16px;margin-left:300px">取消</Button>
                <Button type="primary" @click="handleSubmit('formValidate')">确认</Button>
            </FormItem>
          </Form>
        </Row>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns7: [
        {
          title: '兑奖券名称:',
          key: 'name'
        },
        {
          title: '增币数量',
          key: 'num'
        },
        {
          title: '消费金额',
          key: 'money'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-create'
                },
                style: {
                  fontSize: '17px',
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '编辑'),
              h('Icon', {
                props: {
                  type: 'md-trash'
                },
                style: {
                  fontSize: '17px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data6: [
        {
          name: '双12',
          num: 18,
          money: '4156'
        },
        {
          name: '双12',
          num: 24,
          money: '312'
        },
        {
          name: '双12',
          num: 30,
          money: '123'
        },
        {
          name: '双12',
          num: 26,
          money: '21313'
        }
      ],
      showalert: false,
      formValidate: {
        mingcheng: '',
        money: '',
        num: ''
      },
      ruleValidate: {
        mingcheng: [
          { required: true, message: '按钮名称不能为空', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '消费金额不能为空', trigger: 'blur' },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(value)) {
                callback(new Error('请输入正确消费金额的格式'))
              } else {
                callback(
                  console.log('验证成功')
                )
              }
            },
            trigger: 'blur'
          }
        ],
        num: [
          { required: true, message: '赠币数量不能为空', trigger: 'blur' },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(value)) {
                callback(new Error('请输入正确赠币数量的格式'))
              } else {
                callback(
                  console.log('验证成功')
                )
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    mingcheng () {
    },
    money () {
    },
    num () {
      // console.log(this.formValidate.num)
    },
    add () {
      this.showalert = true
    },
    pageNum (page) {},
    quxiao () {
      this.showalert = false
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.showalert = false
      this.$refs[name].resetFields()
    },
    remove (index) {
      this.data6.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.box{
  position: relative;
  width: 100%;
  height: 700px;
  .content_page{
      height:80px;
      line-height: 80px;
      display: flex;
      flex-direction:row;
      justify-content:flex-end;
      margin-top: 300px;
      .page{
        margin-left:2%;
      }
    }
    .alert{
      background-color: aqua;
      width: 600px;
      height: 363px;
      position: absolute;
      top:40px;
      left:300px;
      z-index: 1;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #E9E9E9;
      .p_title{
          height:50px;
          line-height:50px;
          border-bottom: 1px solid #E9E9E9;
          padding-left:14px;
          font-size:14px;
          color: #17233D
        }
      .Row_content_input{
        width: 240px;
      }
      .goubinum{
        padding-left: 150px;
        margin-bottom: 20px;
        font-size: 12px;
      }
    }
}
</style>
<style>
#mygrid .ivu-table th,#mygrid .ivu-table td{
  text-align: center;
}
</style>
